<template>
    <div id="left">
        <el-menu
                class="el-menu-vertical-demo"
                :default-active="this.$route.path"
                router
        >
            <div v-for="(item, index) of leftNavData" :key="index">
                <el-submenu v-if="item.texts !== undefined" :index="index.toString()">
                    <template slot="title">
                        <i :class="item.icon"/>
                        <span>{{item.name}}</span>
                    </template>
                    <div v-for="(text, index) in item.texts" :key="index">
                        <el-menu-item v-if="text.texts === undefined" :key="index" :index="text.href">
                            {{text.text}}
                        </el-menu-item>
                        <el-submenu v-else>
                            <template slot="title">
                               <span>
                                   {{text.text}}
                               </span>
                            </template>
                            <el-menu-item v-for="(_text, index) in text.texts" :key="index" :index="_text.href">
                                {{_text.text}}
                            </el-menu-item>
                        </el-submenu>
                    </div>

                </el-submenu>
                <el-menu-item v-else :key="index" :index="item.href">
                    <i :class="item.icon"/>
                    <span>{{item.name}}</span>
                </el-menu-item>
            </div>

        </el-menu>
    </div>

</template>

<script>
    import {Menu, MenuItem, Submenu} from "element-ui";


    export default {
        props: {
            leftNavData: {
                type: Array,
                require: true
            }
        },
        name: "LeftNav",
        components: {
            "el-menu": Menu,
            "el-submenu": Submenu,
            "el-menu-item": MenuItem
        },
        data() {
            return {}
        },
        computed: {}
    }
</script>

<style scoped>
    #left {
        margin-left: 30px;
    }

</style>
